Style Classes

Style classes are used where you want to apply a style either on some of tags or across the several tags without repeating the style rule in an HTML document. To apply the style classes, you need to use the class attribute to HTML tag. Using this method of creating styles, you can create styles in the form of style classes in an external style sheet or as an embedded style sheet. You can simply assign the class attribute of the HTML element to the name of the style class so as to apply a style defined in a style class to an HTML element. You can create two types of style classes: universal style classes and element specific style classes. A universal style class starts with a dot operator (.) followed by the class name. the syntax of defining a universal style class is as follows:


<style>
   Class name {class definition}
</style>

An element specific style class starts with the element name, followed by a dot operator which is followed by the class name. the syntax of defining an element specific style class is as follows:


<style>
      Element name.class name {class definition}
</style>

Let’s do the following steps to create classes in an HTML document:


<!DOCTYPE html>
<html>
<head>
    <title> Style Classes</title>
<style>
body {background-color:#f0f8ff}
th.color {background-color: #800000}
.green {background-color: #008000}
</style>
</head>
<body>
    <table border=”1”>
    <caption><h2>Student Details</h2></caption>
    <tr>
        <th class=”color”>Name</th>
        <th class=”color>Date of Birth</th>
        <th class=”color>Address</th>
    </tr>
    <tr>
        <td class=”green”>John Saxena </td>
        <td class=”green”>15-03-1983</td>
        <td class=”green”>Flat No 303, Shipra Suncity, Ghaziabad </td>
    </tr>
    <tr>
        <td class=”green”>Amitabh Kumar </td>
        <td class=”green”>15-03-1984</td>
        <td class=”green”>Flat No 303, Rajendra Place, New Delhi </td>
    </tr>
    <tr>
        <td class=”green”>Rohit Jandal </td>
        <td class=”green”>15-03-1983</td>
        <td class=”green”>Flat No 303, South Ext. Delhi </td>
    </tr>
    <tr>
        <td class=”green”>Alex Remla </td>
        <td class=”green”>15-03-1983</td>
        <td class=”green”>Flat No 303, Vikas Puri, Delhi </td>
    </tr>
</table>
</body>
</html>

Save the document with the name StyleClasses.html and open on browser.

PRV MENU NEXT

Style Classes

Latest Post